<style>a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {

    margin: 0;

    padding: 0;

}



em, i, u {

    font-style: normal;

}

ul,li,dd,dl,dt{

    list-style-type: none

}

li,a,div{

    outline: none

}

.clearfix:after {

    content: "." ;

    display: block ;

    height: 0 ;

    clear: both ;

    visibility: hidden ;

}

*:first-child+html .clearfix { zoom: 1; }



.clear, .clr {

    clear: both;

    display: block;

    font-size: 0;

    height: 0;

    line-height: 0;

    overflow: hidden;

}

.cl{

    clear: both;

}

img{

    border:0

}

a {

    color:#666666;

    text-decoration: none;

    cursor: pointer;

    font-size: 12px

}#categorys-2014 {

    float: left;

    height: 44px;

    overflow: visible;

    position: relative;

    width: 210px;

    z-index: 10;

}

#categorys-2014 .dt a {

    background: #b1191a none repeat scroll 0 0;

    color: #fff;

    display: block;

    font: 400 15px/44px "microsoft yahei";

    height: 44px;

    padding: 0 10px;

    text-decoration: none;

    width: 190px;

}

#categorys-2014 .dd {

    background: #c81623 none repeat scroll 0 0;

    height: 454px;

    margin-top: 2px;

}

#categorys-2014 .dd-inner .item {

    border-left: 1px solid #b61d1d;

    color: #fff;

    height: 31px;

    position: relative;

    z-index: 1;

}

#categorys-2014 .dd-inner .item a {

    color: #fff;

}

#categorys-2014 .dd-inner h3 {

    font-family: "microsoft yahei";

    font-size: 14px;

    font-weight: 400;

    height: 31px;

    line-height: 31px;

    padding: 0 10px;

    position: absolute;

    z-index: 2;

}

#categorys-2014 .dd-inner i {

    font: 400 9px/14px consolas;

    height: 14px;

    position: absolute;

    right: 14px;

    top: 9px;

    width: 4px;

    z-index: 1;

}

#categorys-2014 .dd-inner .hover {

    background: #f7f7f7 none repeat scroll 0 0;

    color: #b61d1d;

}

#categorys-2014 .dd-inner .hover a {

    color: #b61d1d;

}

#categorys-2014 .dd-inner .hover i {

    background: #f7f7f7 none repeat scroll 0 0;

    height: 31px;

    left: 205px;

    line-height: 200px;

    overflow: hidden;

    top: 0;

    width: 14px;

}

#categorys-2014 .dorpdown-layer {

    background: #f7f7f7 none repeat scroll 0 0;

    border: 1px solid #b61d1d;

    display: none;

    left: 209px;

    overflow: hidden;

    position: absolute;

    top: 0;

    width: 779px;

}

#categorys-2014 .dorpdown-layer .hover {

    display: block;

}

#categorys-2014 .item-sub {

    display: none;

    overflow: hidden;

}

#categorys-2014 .item-sub::after {

    clear: both;

    content: ".";

    display: block;

    height: 0;

}

#categorys-2014 .item-channels {

    background: #f7f7f7 none repeat scroll 0 0;

    display: inline;

    float: left;

    height: 24px;

    overflow: hidden;

    padding: 20px 0 0 20px;

    width: 570px;

}

#categorys-2014 .item-channels a {

    background: #7c7171 none repeat scroll 0 0;

    color: #fff;

    display: inline-block;

    float: left;

    line-height: 24px;

    margin-right: 10px;

    padding: 0 0 0 8px;

    white-space: nowrap;

}

#categorys-2014 .item-channels a:hover {

    background: #c81623 none repeat scroll 0 0;

}

#categorys-2014 .item-channels a:hover i {

    background: #b1191a none repeat scroll 0 0;

}

#categorys-2014 .item-channels i {

    background: #5c5251 none repeat scroll 0 0;

    cursor: pointer;

    display: inline-block;

    font: 400 9px/24px consolas;

    height: 24px;

    margin-left: 8px;

    text-align: center;

    width: 23px;

}

#categorys-2014 .item-channels .line {

    border-left: 1px solid #dbdbdb;

    display: inline;

    float: left;

    height: 24px;

    margin-right: 7px;

    overflow: hidden;

    width: 1px;

}

#categorys-2014 .item-channels .img-link {

    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

    line-height: normal;

    padding: 0;

}

#categorys-2014 .item-channels .img-link:hover {

    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

}

#categorys-2014 .item-channels .style-red {

    background: #c81623 none repeat scroll 0 0;

}

#categorys-2014 .item-channels .style-red i {

    background: #b1191a none repeat scroll 0 0;

}

#categorys-2014 .item-channels .style-red:hover {

    background: #961019 none repeat scroll 0 0;

}

#categorys-2014 .item-channels .style-red:hover i {

    background: #851313 none repeat scroll 0 0;

}

#categorys-2014 .subitems {

    background: #f7f7f7 none repeat scroll 0 0;

    float: left;

    margin-bottom: -1000px;

    min-height: 409px;

    padding: 6px 0 1006px 20px;

    width: 570px;

}

#categorys-2014 .subitems dl {

    line-height: 2em;

    overflow: hidden;

    width: 100%;

}

#categorys-2014 .subitems dl.fore1 dd {

    border-top: medium none;

}

#categorys-2014 .subitems dt {

    float: left;

    font-weight: 700;

    padding: 8px 30px 0 0;

    position: relative;

    text-align: right;

    width: 54px;

}

#categorys-2014 .subitems dt i {

    font: 400 9px/14px consolas;

    height: 14px;

    position: absolute;

    right: 18px;

    top: 13px;

    width: 4px;

}

#categorys-2014 .subitems dd {

    border-top: 1px solid #eee;

    float: left;

    padding: 6px 0;

    width: 480px;

}

#categorys-2014 .subitems dd a {

    border-left: 1px solid #e0e0e0;

    float: left;

    height: 16px;

    line-height: 16px;

    margin: 4px 0;

    padding: 0 8px;

    white-space: nowrap;

}

#categorys-2014 .item-brands {

    display: inline;

    float: right;

    margin: 19px 20px 10px 0;

    overflow: hidden;

    width: 168px;

}

#categorys-2014 .item-brands a {

    display: inline;

    float: left;

    margin: 1px 0 0 1px;

}

#categorys-2014 .item-promotions {

    display: inline;

    float: right;

    margin-right: 20px;

    width: 168px;

}

#categorys-2014 .item-promotions a {

    display: block;

    margin-bottom: 1px;

}

#navitems-2014 {

    float: left;

    position: relative;

    z-index: 2;

}

#navitems-2014 .spacer, #navitems-2014 a, #navitems-2014 li, #navitems-2014 ul {

    float: left;

}

#navitems-2014 .spacer {

    display: none;

}

#navitems-2014 a {

    color: #333;

    font: 400 15px/44px "microsoft yahei";

    height: 44px;

    padding: 0 20px;

    text-align: center;

    text-decoration: none;

}

#navitems-2014 a:hover {

    color: #c81623;

}

#navitems-2014 .spacer {

    background: #ddd none repeat scroll 0 0;

    height: 24px;

    margin: 10px 0 0;

    overflow: hidden;

    width: 1px;

}
</style>
<div class="dorpdown" id="categorys-2014">
      <div class="dd">
        <div class="dd-inner">
        
        
        
        <volist name="list" id="vo">
          <div class="item fore{$key}">
            <h3><a href="" target="_blank">{$vo.title}</a></h3>
            <i>&gt;</i> </div>
            </volist>
            
            
        </div>
        
        
        
        
        <div style="display: none;" class="dorpdown-layer" id="index_menus_sub">
          <volist name="list" id="vo"><div data-id="b" id="category-item-{$key}" class="item-sub">
            <div clstag="h|keycount|2015|0502d" class="item-brands">
              <div class="brands-inner"> <a target="_blank" class="img-link" href=""> <img width="83" height="35" src="images/54dac925N430994cf.jpg"> </a> </div>
            </div>
            <div class="subitems">
              <dl class="fore{$key}">
                <dt> <a target="_blank" href=""> 数码配件{$key} <i> &gt; </i> </a> </dt>
                <dd> <a target="_blank" href=""> 存储卡 </a> </dd>
              </dl>
            </div>
            <div  class="item-promotions"> <a target="_blank" class="img-link" href=""> <img width="168" height="134" src="images/558ece77N338e5b20.jpg"/> </a> <a target="_blank" class="img-link" href=""> <img width="168" height="134" src="images/5591f4cfN5f954f59.jpg"/> </a> </div>
          </div>  </volist>
        </div>
        
        
      
        
        
      </div>
    </div>
<!---------左侧导航菜单结束-------------> 

<script src="/Public/Admin/bootstrap/js/jquery.min.js"></script>
<script  type="text/javascript">

            $(function() {

                $(".dd-inner").children(".item").hover(function() { //一级导航悬浮

                    $(this).addClass("hover").siblings(".item").removeClass("hover");

                    var index = $(this).index();

                    $(".dorpdown-layer").children(".item-sub").hide();

                    $(".dorpdown-layer").children(".item-sub").eq(index).show();



                })

                $(".dd-inner").hover(function() { //整个导航菜单悬浮，是否显示二级导航到出厂

                    $("#index_menus_sub").show();

                }, function() {

                    $("#index_menus_sub").hide();

                    $('.item').removeClass("hover");

                })

                $("#index_menus_sub").children(".item-sub").hover(function() { //二级导航悬浮

                    var index = $(this).index();

                    $(".dd-inner").children(".item").eq(index).addClass("hover");

                    $("#index_menus_sub").show();

                }, function() {

                    $("#index_menus_sub").hide();

                    $(".dd-inner").children(".item").removeClass("hover");

                })

            })

        </script>

